<template>
  <v-dialog v-model="vcodeDialog" persistent max-width="300px" :fullscreen="$vuetify.breakpoint.xsOnly">
    <v-card>
      <v-card-title>
        {{verifyTitle}}
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text>
        <div class="code" @click="refreshCode">
          <SIdentify :identifyCode="identifyCode"></SIdentify>
        </div>
        <v-text-field label="验证码" v-model="verifyCode"></v-text-field>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" flat @click="confirmVerify" >确认</v-btn>
        <v-btn color="blue darken-1" flat @click="closeVerify" >关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import SIdentify from '../../components/verify/identify'

export default {
  name: 'verify',
  resultData: false,
  data () {
    return {
      identifyCode: '',
      identifyCodes: '1234567890',
      verifyCode: ''
    }
  },
  props: {
    vcodeDialog: {
      type: Boolean,
      default: null
    },
    verifyTitle: {
      type: String,
      default: ''
    }

  },
  methods: {
    closeVerify () {
      this.$emit('clsVerify')
    },
    confirmVerify () {
      if (this.identifyCode === this.verifyCode) {
        this.$emit('upVerify')
      } else {
        alert('验证码错误！')
      }
    },
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 6)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
    }
  },
  watch: {
    vcodeDialog () {
      this.verifyCode = ''
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 6)
    }
  },
  components: {
    SIdentify
  }
}
</script>
